<template>
  <div style="position: absolute;top: 0;left: 0;width: 100%;background: transparent;z-index: 10">
    <div style="position: relative;z-index: 200;height: 3rem">
      <top-header :title="pageTitle"
                  :hasBack="true" :hasCart="true"
                  :hasSearch="true"
                  titleType="classify"
                  @showClassify="showClassify">
      </top-header>

      <pop-up ref="classifyModle">
        <tap-select-box
          page="firstClass"
          :titleInfor="classifyList"
          @hidePopUp="hideClassify"
          :activeClass="goodsClassCode"
          style="width: 100%">
        </tap-select-box>
      </pop-up>

    </div>
    <order-header>
    </order-header>
    <tab-head
      v-if="isShowTapHead || secList.length <= 4"
      :titleInfor="secList"
      :pullDownMemu="true"
      ref="tabHead">
    </tab-head>
    <slot name="aniamteRefresh"></slot>
  </div>

</template>

<script>
  import TabHead from '@/real-components/TabHead'
  import TopHeader from '@/real-containers/header'
  import OrderHeader from '@/real-components/OrderHeader'
  import PopUp from '@/real-components/PopUps'
  import TapSelectBox from '@/real-components/TapSelectBox'
  import {mapGetters} from 'vuex'
  import {getPageTree, initDomTree} from '../../../utils/getPageTree'
  import axios from 'axios';

  export default {
    data () {
      return {
        page: "goodsClassify",
        componentName: "goodsClassifyHeader",
        titleInfor: [
          {
            goodsClassId: "01",
            goodsClassName: "fwef"
          },
          {
            goodsClassId: "02",
            goodsClassName: "fwef"
          },
          {
            goodsClassId: "03",
            goodsClassName: "fwef"
          },
          {
            goodsClassId: "04",
            goodsClassName: "fwef"
          }]
      }
    },

    components: {TabHead, TopHeader, OrderHeader, PopUp, TapSelectBox},

    props: {
      pageTitle: {
        type: String,
        default: ""
      },
      secList: {
        type: Array,
        default: () => {
          return []
        }
      },
      classifyList: {
        type: Array,
        default: () => []
      },
      isShowTapHead: {
        type: Boolean,
        default: false
      },
      goodsClassCode: {
        type: String,
        default: ''
      }
    },
    computed: {
      ...mapGetters([
        "getDomTree"
      ]),
      pageTree () {
        return getPageTree(this, this.page);
      }
    },

    methods: {
      //关闭下拉菜单
      closePull () {
        var tabHead = this.$refs.tabHead
        tabHead && tabHead.closeClassifyClum()
      },
      showClassify () {
//        this.hidePopUp()
        this.$refs.tabHead && this.$refs.tabHead.hidePopUp()
        this.$refs.classifyModle.showPopUp()
      },
      hideClassify () {
        this.$refs.classifyModle.hidePopUp()
      },
      showPopUp (){
        this.$refs.popUp.showPopUp()
      },
      hidePopUp (){
        this.$refs.popUp.hidePopUp()
      },


    },
    beforeCreate () {
      var index = this.$route.query.pageIndex
    },
    created () {
    },
    mounted () {

    },
    updated() {
    }
  }
</script>

<style>

</style>
